<template>
	<view class="main-container">
		<view class="header">
			<text class="title">我的收藏</text>
		</view>
		<view class="collection-list" v-if="collectionList.length > 0">
			<view class="collection-item" v-for="(item, index) in collectionList" :key="index" @tap="goToDetail(item)">
				<image class="item-image" :src="item.image" mode="aspectFill"></image>
				<view class="item-info">
					<text class="item-name">{{ item.name }}</text>
					<text class="item-price">¥{{ item.price }}</text>
				</view>
				<view class="item-actions">
					<button class="action-button" @tap.stop="removeCollection(index)">取消收藏</button>
				</view>
			</view>
		</view>
		<view class="empty-state" v-else>
			<text class="empty-text">暂无收藏商品</text>
		</view>
	</view>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'

export default defineComponent({
	name: 'CollectionPage',
	setup() {
		const collectionList = ref([])

		onMounted(() => {
			const userInfo = uni.getStorageSync('userInfo')
			if (!userInfo) return
			
			const userList = uni.getStorageSync('userList') || []
			const currentUser = userList.find(item => item.uid === JSON.parse(userInfo).uid)
			if (currentUser && currentUser.collection) {
				collectionList.value = currentUser.collection
			}
		})

		const goToDetail = (item) => {
			uni.navigateTo({
				url: `/pages/shopDetail/shopDetail?id=${item.id}`
			})
		}

		const removeCollection = (index) => {
			const userInfo = uni.getStorageSync('userInfo')
			if (!userInfo) return
			
			const userList = uni.getStorageSync('userList') || []
			const userIndex = userList.findIndex(item => item.uid === JSON.parse(userInfo).uid)
			
			if (userIndex > -1) {
				userList[userIndex].collection.splice(index, 1)
				uni.setStorageSync('userList', userList)
				collectionList.value.splice(index, 1)
				
				uni.showToast({
					title: '已取消收藏',
					icon: 'success'
				})
			}
		}

		return {
			collectionList,
			goToDetail,
			removeCollection
		}
	}
})
</script>

<style scoped>
page {
	height: 100%;
	width: 100%;
	background-color: #f8f8f8;
}

.main-container {
	min-height: 100vh;
	padding: 20rpx;
}

.header {
	padding: 20rpx 0;
	margin-bottom: 20rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.collection-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.collection-item {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 20rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.item-image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 10rpx;
}

.item-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.item-name {
	font-size: 28rpx;
	color: #333;
	line-height: 1.4;
}

.item-price {
	font-size: 32rpx;
	color: #fd2d3e;
	font-weight: bold;
}

.item-actions {
	display: flex;
	align-items: center;
}

.action-button {
	background-color: #f8f8f8;
	color: #666;
	font-size: 24rpx;
	padding: 10rpx 20rpx;
	border-radius: 30rpx;
	line-height: 1.5;
}

.action-button::after {
	border: none;
}

.empty-state {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 400rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}
</style>